<template>
	<view class="dingdan-page">
		<view class="dingdan-header">
			<image src="../../static/img/search.png"></image>
			<view class="dingdan-title">订单</view>
		</view>
		<view class="content">
			<!-- 顶部的TabBar设计 -->
			<view class="tabbar">
				<block v-for="item in tabs" :key="item.id">
					<view @click="changeTab(item.id)" class="tab" :class="{'active':item.select}">{{item.name}}</view>
				</block>
			</view>
			<view v-show="tabs[0].select">
				<orderJD></orderJD>
			</view>
			<view v-show="tabs[1].select">
				<orderJD></orderJD>
				<orderJD></orderJD>
			</view>
		</view>
	</view>


</template>

<script>
	import orderJD from '../../components/orderJD.vue'
	export default {
		name: 'dingdan-component',
		data() {
			return {
				tabs: [{
						id: 1,
						name: '待入住订单',
						select: true
					},
					{
						id: 2,
						name: '全部订单',
						select: false
					},
				]
			}
		},
		components: {
			orderJD,
		},
		onLoad() {

		},
		methods: {
			changeTab(id) {
				this.tabs.forEach(item => {
					//先将所有的选项变为没有颜色
					//赋值关系：从右向左
					item.select = false
					//再将选中的选项select设置为true
					// == 等于符号
					if (item.id == id) {
						item.select = true
					}
				})
			}
		}
	}
</script>

<style lang="less">
	.dingdan-page {
		position: absolute;
		width: 100%;
		height: 100%;
		background-color: #F1F2F3;
	}

	.dingdan-header {
		height:60rpx ;
		position: relative;
		image{
			position: absolute;
			width: 40rpx;
			height: 40rpx;
			margin:10rpx
		}
		.dingdan-title{
			text-align: center;
			font-size: 30rpx;
		}
	}

	.tabbar {
		display: flex;
		justify-content: space-around;
		width: 100%;
		margin-bottom: 40rpx;
	}

	.tab {
		/* flex:xxx
		/* width: 100rpx; */
		height: 40rpx;
		/* border: 2rpx solid black; */
		text-align: center;
	}

	.active {
		// background-color: greenyellow;
		border-bottom: 5rpx solid greenyellow;
		color: balck;
	}

	.hotle-name image {
		width: 50rpx;
		height: 50rpx;
		margin-top: 20rpx;
	}
</style>